<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTool :show-before="true">
          <template v-slot:before>
            <el-button type="primary" size="small" @click="add">添加页面</el-button>
          </template>
          <template v-slot:after>
            <el-input class="search" placeholder="请输入关键字">
              <template slot="append">筛选</template>
            </el-input>
          </template>
        </PageTool>
        <template>
          <!-- 表格 -->

          <el-table :data="tableData" border style="width: 100%;border:none">
            <el-table-column class="title" prop="title" label="标题" width="400" />
            <el-table-column prop="content" label="内容" width="500">
              <template slot-scope="scope">
                <div style="max-height:170px;overflow-y:auto;overflow-x:hidden;" v-html="scope.row.content" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="500">
              <template v-slot="{ row }">
                <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
      <!-- 编辑页面 -->
      <PageDialog ref="from" :show-dialog.sync="showDialog" @updateEvent="updateList" />
    </div>
  </div>
</template>
<script>
import { getPageList, delPage } from '@/api/model/PageStap'
import PageDialog from './components/PageDialog.vue'
export default {
  components: { PageDialog },
  data() {
    return {
      tableData: [
        {
          title: '',
          content: '',
          id: null
        }
      ],
      from: [],
      showDialog: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 去除标签
    // Tag(content) {
    //   return content.replace(/<[^]+>/g, '')
    // },

    // 编辑
    async edit(id) {
      this.from.id = id
      this.showDialog = true
      this.$refs.from.editPage(id)
    },
    // 更新列表
    updateList() {
      this.getList()
    },
    // 添加页面
    add() {
      this.showDialog = true
      this.getList()
    },
    // 删除页面
    async del(id) {
      this.$confirm('确定删除该员工吗?', '提示', {
        type: 'warning'
      }).then(async() => {
        await delPage(id)
        // console.log('del', res)
        this.getList()
      })
    },
    // 获取列表数据
    async getList() {
      const res = await getPageList({
        _limit: 5,
        _start: 0
      })
      // console.log('11111111111', res)
      this.tableData = res.data
    }
  }
}
</script>
<style scoped>
.search {
  margin-top: 15px;
}

::v-deep .el-table_1_column_1 {
  height: 100px;
}
</style>

